<template>
  <div>
    <van-cell-group class="qqLogon1">
      <van-field v-model="username" required clearable label="用户名" right-icon="question-o" placeholder="请输入用户名"/>

      <van-field v-model="password"  required type="password" label="密码" placeholder="请输入密码"/>
    </van-cell-group>
    <div class="qqLogon2">
      <button class="onLogon" @click="onLogon" >立即登录</button>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        username: '',
        password: '',
        arr:[],
        message:''
      }
    },
    updated(){
    },
    methods:{
      onLogon(){
        /*console.log(this.username+this.password)*/
        this.arr = [{password: this.password},{username:this.username}]
        this.$axios.post("https://api.apiopen.top/developerUpdateKey",[{name:this.username},{passwd:this.password},{email:'33333@qq.com'}])
          .then(res => {
            this.message = res.data.message
          })
        this.$toast(this.message)
      }
    }
  }
</script>

<style lang="less">
  .qqLogon1{
    padding-top: 20rem;
    text-align: center;
    .van-cell--required{
      height: 6rem;
      line-height: 6rem;
      border-bottom: 0.1rem solid #000;
    }
    .van-cell--required::before{
      font-size: 2.5rem;
    }
    .van-field__label{
      width: 6rem;
      font-size: 1.5rem;
    }
    .van-cell__value{
      height: 100%;
      font-size: 1.5rem;
    }
    .van-field__left-icon .van-icon, .van-field__right-icon .van-icon{
      font-size: 1.5rem;
    }
  }

  .qqLogon2{
    padding-top: 5rem;
    text-align: center;
    .onLogon{
      display: inline-block;
      width: 15rem;
      height: 5rem;
      border-radius: 1rem;
      line-height: 5rem;
      font-size: 2rem;
      color: #fff;
      background-color: #31c27c;
    }
  }
  .van-toast--html, .van-toast--text{
    font-size: 2rem;
    padding: 2.25rem 1.4rem;
  }
</style>
